<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
    </style>
</head>
<body>
    <div id="div1">my name is andy!</div>

    <div id="div2">what's your name?</div>
    <button id="btn1">concat</button><span></span><input type="text" id="text"> <br/>
    <button id="btn2">slice(3)</button><span></span> <br/>
    <button id="btn3">slice(3,6)</button><span></span> <br/>
    <button id="btn4">slice(-1)</button><span></span> <br/>


    <button id="btn5">substr(3)</button><span></span> <br/>
    <button id="btn6">substr(3，6)</button><span></span> <br/>
    <button id="btn7">substr(-1) 兼容</button><span></span> <br/>
    区别
    <button id="btn8">slice(6,3)</button><span></span> <br/>
    <button id="btn9">substring(6,3)</button><span></span> <br/>
    <script type="text/javascript">
        function onclickBtn(id,txt) {
            document.getElementById(id).onclick = function () {
                this.nextSibling.innerHTML = txt;
            }
        }
        var div1 = document.getElementById("div1").innerHTML;
        var div2 = document.getElementById("div2").innerHTML;
        // var resDiv1 = div1.value;
        // var resDiv2 = div2.value;注意，这里div没有value这个属性！！
        // onclickBtn("btn1",div1.concat(div2));
        onclickBtn("btn2",div1.slice(3));  // 从第3个开始取，一直取到最后
        onclickBtn("btn3",div1.slice(3,6));  // 3 从 第3个开始 取     6  取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
        onclickBtn("btn4",div1.slice(-1));  // 从右边开始取

        //substr组

        onclickBtn("btn5",div1.substr(3));  //
        onclickBtn("btn6",div1.substr(3,6));  //substr(string,start,length)
        onclickBtn("btn7",div1.substr(div1.length-1,1));  // 兼容的写法

        // substring 组

        onclickBtn("btn8",div1.slice(6,3));//slice(start,end)
        onclickBtn("btn9",div1.substring(6,3));

        var button1 = document.getElementById("btn1");
        var text = document.getElementById("text");
        button1.onclick = function () {
           var value =  div1.concat(div2);
           text.value = value;
        }


    </script>

</body>
</html>